<template>
    <div class="sub-category" v-loading="!loading">
        <div class="container" v-if="loading">
            <!-- 面包屑 -->
            <el-breadcrumb :separator-icon="ArrowRight">
                <template v-if="loading">
                    <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
                    <el-breadcrumb-item
                        :to="`/category/${subList.info?.pid}`"
                        >{{ subList.info?.pname }}</el-breadcrumb-item
                    >
                    <el-breadcrumb-item>{{
                        subList.info?.name
                    }}</el-breadcrumb-item>
                </template>
                <template v-else>
                    <skeleton
                        width="30px"
                        height="18px"
                        style="margin-left: 0px"
                    ></skeleton>
                    <skeleton
                        width="30px"
                        height="18px"
                        style="margin-left: 15px"
                    ></skeleton
                ></template>
            </el-breadcrumb>
            <!-- sku区域 -->
            <div class="sku">
                <el-card shadow="hover">
                    <SubFilter :sku="subList.sku"
                /></el-card>
            </div>
            <!-- 商品区 -->

            <el-card shadow="hover">
                <div class="goods-list">
                    <GoodsItem
                        v-for="goods in subList.goods"
                        :key="goods.goods_id"
                        :goods="goods"
                    />
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { computed, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { findSubSkuList } from '@/apis/category'
import SubFilter from './components/sub-filter.vue'
const route = useRoute()
const router = useRouter()
// 获取sku
const loading = ref(false)
const subList = ref([])
const getSubList = () => {
    findSubSkuList(route.params.cid)
        .then(data => {
            subList.value = data
            loading.value = true
        })
        .catch(err => {
            router.push('/404')
        })
}
watch(
    () => route.params.cid,
    newVal => {
        getSubList()
    },
    { immediate: true }
)
</script>

<style lang="scss" scoped>
.el-breadcrumb {
    margin-bottom: 15px;
}
.sub-category {
    width: 100vw;
    min-height: 40vh;
    .container {
        .el-card {
            margin-top: 10px;
        }
        .sku {
            .el-card {
                width: 1240px;
                height: auto;
            }
        }
    }
}
.goods-list {
    margin-top: 20px;
    width: 1240px;
    display: flex;
    flex-wrap: wrap;
    > * {
        margin-left: 15px;
    }
}
</style>
